<template>
  <div>
    <!-- <div class="header">
      <img v-if="ifSearch" src="../assets/ic_pipei.png" alt />
      <input type="text" name v-model="serchVal" placeholder="请输入好友昵称" id />
    </div>-->
    <!-- list -->
    <div class="list_wrap">
      <div class="noList" v-if="friendList.length==0">
        <img src="../assets/ic_noTalking.png" alt />
        <div>还没有还有哦,快去匹配好友吧~</div>
      </div>
      <div class="list_item" v-else @click="goChat(index)" v-for="(item,index) in friendList" :key="index">
        <div>
          <img :src="item.userUuid" class="ic_tou" />
          <div>
            <div>{{item.username}}</div>
            <div class="talkTime">2019/11/11 12:00</div>
          </div>
        </div>
        <div>
          <div class="friends_num" v-if="item.unreadCount!=0">{{item.unreadCount}}</div>
          <img src="../assets/ic_next.png" style="width:9px;header:15px;" />
        </div>
      </div>
    </div>
    <tab selected="MyFriend"></tab>
  </div>
</template>
<script>
import * as API from "@/http/common/api";
import Tab from "./tab/tab";
import { watch } from "fs";
export default {
  name: "myFriend",
  data() {
    return {
      serchVal: null,
      ifSearch: true,
      userInfo: null,
      friendList: []
    };
  },
  methods: {
    goChat(index) {
      this.$router.push({
        name: "Talking",
        params: { message: this.friendList[index] }
      });
    },
    // 获取好友列表
    getFriendList() {
      this.$http(API.findAll, {
        type: "POST",
        params: {
          userId: this.userInfo.userId
        }
      })
        .then(res => {
          var a = res.data.Message
          for(var  i in a){
            a[i].unreadCount = 0
          }
          this.friendList = a;
        })
        .catch(err => {
          this.$vux.loading.hide();
          this.$vux.toast.show({ text: "网络错误，请重试", type: "text" });
        });
    },
    //// 拉取会话列表
    getChatList(){
      var that =this
      let promise = tim.getConversationList();
      promise.then(function(imResponse) {
        for (var i =0;i<that.friendList.length;i++){
          that.friendList[i].unreadCount = imResponse.data.conversationList[i].unreadCount;
          console.log("sddd")
        }
        console.log('会话列表，====',imResponse.data.conversationList)
      }).catch(function(imError) {
        console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
      });
    }
  },
  mounted() {
    this.userInfo = JSON.parse(this.$localStorage.get("userInfo"));
    this.getFriendList();
  },
  watch: {
    serchVal(e) {
      if (e) {
        this.ifSearch = false;
      } else {
        this.ifSearch = true;
      }
    }
  },
  components: { Tab }
};
</script>
<style  scoped >
.noList{
  text-align: center;
  color: #666;
}
.noList>img{
  width: 150px;
  height: 150px;
  margin:  0 auto;
  padding-top: 100px;
  box-sizing: content-box;
}
.header {
  background: #fff;
  height: 44px;
  align-items: center;
  position: relative;
  display: flex;
}
.header > input {
  width: 319px;
  height: 28px;
  margin: 0 auto;
  width: 319px;
  height: 28px;
  background: #f2f2f2;
  text-align: center;
  border-radius: 14px;
  font-size: 12px;
}
.header > img {
  width: 14px;
  height: 14px;
  position: absolute;
  left: 124px;
}
.ic_tou {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 8px;
}
.friends_num {
  width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 25px;
  font-size: 10px;
  color: #fff;
  background: rgb(250, 0, 0);
  margin-right: 10px;
  text-align: center;
}
.list_wrap {
  margin-top: 5px;
  margin-bottom: 60px;
}
.list_item {
  display: flex;
  height: 60px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px 0 15px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.list_item:last-child {
  border: none;
}
.list_item > div {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.talkTime {
  font-size: 12px;
  color: #999;
}
/* 滑块 */
.checke {
  position: relative;
  -webkit-appearance: none;
  width: 22px;
  height: 13.5px;
  line-height: 13.5px;
  background: rgb(153, 153, 153);
  border-radius: 15px;
  outline: none;
}
.checke:before {
  position: absolute;
  left: 0;
  content: "";
  width: 13.5px;
  height: 13.5px;
  border-radius: 50%;
  background: #eee;
  box-shadow: 0px 0px 2.5px #ddd;
  transition: all 0.2s linear;
}

.checke:checked {
  background: #e83263;
}
.checke:checked:before {
  left: 11px;
  transition: all 0.2s linear;
}

/* 滑块end */
</style>